<template>
  <div>
    <div class="title">定制个性化课程 高效提分快准狠</div>
    <ul class="title_con">
      <li class="title_item">
        <img src="@/assets/image/雅思课程.jpg" @mouseenter="i=0" alt />
        <div class="item_add" v-show="i===0">
          <ul class="item_content" style="display:flex" >
            <li>
              <div class="item_bg">
                <div class="item_tit">雅思单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">雅思单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">雅思单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
          </ul>
        </div>
      </li>
      <li  class="title_item">
        <img src="@/assets/image/托福课程.jpg" @mouseenter="i=1" alt />
        <div class="item_add"  v-show="i===1">
          <ul class="item_content" style="display:flex" v-show="true">
            <li>
              <div class="item_bg">
                <div class="item_tit">托福单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">托福单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">托福单向班</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
          </ul>
        </div>
      </li>
      <li class="title_item">
        <img src="@/assets/image/小托福课程.jpg" @mouseenter="i=2" alt />
        <div class="item_add" v-show="i===2" >
          <ul class="item_content" style="display:flex" v-show="true">
            <li>
              <div class="item_bg">
                <div class="item_tit">四级</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">六级</div>
                <div>
                  深入剖析
                  <br />针对式分析
                </div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
            <li>
              <div class="item_bg">
                <div class="item_tit">研究生入学英语考试</div>
              </div>
              <div class="item_free">免费试听</div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      i: 0
    };
  }

};
</script>

<style>
.title {
  width: 1200px;
  height: 120px;
  line-height: 120px;
  font-size: 34px;
  font-weight: bolder;
}
.title_con {
  width: 1200px;
  height: 320px;
  display: flex;
  text-align: left;
}

.title_item {
  display: flex;
  text-align: center;
}

.title_item > .item_add {
  width: 628px;
  height: 318px;
  border: 1px solid #FF6F3B;
}

.item_content {
  width: 570px;
  height: 280px;
  margin: 20px auto;
  justify-content: space-between;
}

.item_bg {
  width: 160px;
  height: 190px;
  background: url("../assets/image/ielts_cour_bg.jpg");
}

.item_tit {
  margin-top: 30px;
  color: #eb5404;
  font-size: 26px;
  font-weight: bolder;
  padding: 40px 0;
}

.item_free {
  margin-top: 20px;
  width: 144px;
  height: 36px;
  border-radius: 30px;
  border: 1px solid #ea5404;
  color: #ea5404;
  line-height: 36px;
}
</style>